<script setup lang="ts">
import { computed } from 'vue';
import { CheckSquareOutlined } from '@ant-design/icons-vue';
import { useSect } from '../../../composables';
import { EVENTS, GameKernel } from '../../../game';
import VProgress from '../components/progress.vue';
import SectInfo from './sect-info.vue';

const emit = defineEmits<{
  (e: 'change-scene', id: string): void;
}>();

const { state: sectState } = useSect();

const sectJobList = computed(() => {
  return sectState.value.sectJobList;
});

const currentSectJob = computed(() => {
  return sectState.value.currentSectJob;
});

const currentSectInfo = computed(() => {
  return sectState.value.sectList.find(
    (item) => item.config.id === sectState.value.currentSect
  );
});

const nextContribution = computed(() => {
  return currentSectJob.value?.config.nextContribution || 0;
});

function onBackClick() {
  emit('change-scene', 'sect-main');
}

function onUpgradeClick() {
  GameKernel.inst.bus.emit(EVENTS.SECT_JOB_UPGRADE);
}
</script>

<template>
  <div v-if="currentSectInfo" class="w-full h-full flex flex-col">
    <div class="flex-none py-2 text-lg font-bold text-center relative">
      <div class="absolute left-2 top-1/2 transform -translate-y-1/2">
        <a-button @click="onBackClick">返回</a-button>
      </div>
      <div>{{ currentSectInfo.config.name }} - 职务堂</div>
    </div>
    <div class="flex-none border-0 border-t border-solid border-border p-2">
      <sect-info></sect-info>
    </div>
    <div class="flex-1 overflow-auto p-2">
      <div class="flex flex-col gap-2">
        <a-card
          v-for="job in sectJobList"
          :key="job.config.id"
          size="small"
          :class="[
            'relative',
            {
              'job-active': currentSectJob?.config.level === job.config.level,
            },
          ]"
        >
          <div>
            <div class="text-base font-bold">{{ job.config.name }}</div>
            <div class="flex items-center gap-1 text-gray-400">
              <div>宗门收益获取提升</div>
              <div>
                <span>{{ Math.floor((job.config.multiplier - 1) * 100) }}</span>
                <span>%</span>
              </div>
              <div>(不包含宗门贡献)</div>
            </div>
          </div>
          <div
            v-if="currentSectJob?.config.level === job.config.level"
            class="absolute right-3 top-1/2 transform -translate-y-1/2"
          >
            <check-square-outlined
              class="text-xl text-[var(--color-primary)]"
            />
          </div>
        </a-card>
      </div>
    </div>
    <div
      v-if="nextContribution !== 0"
      class="flex-none p-2 flex flex-col justify-center"
    >
      <div class="flex items-center justify-center">
        <div>宗门贡献：</div>
        <div>{{ sectState.sectContribution }}/{{ nextContribution }}</div>
      </div>
      <div>
        <v-progress
          :value="sectState.sectContribution"
          :max="nextContribution"
          size="mini"
        ></v-progress>
      </div>
    </div>
    <div
      class="flex-none py-2 flex justify-center border-0 border-t border-solid border-border"
    >
      <a-button
        :disabled="
          sectState.sectContribution < nextContribution ||
          nextContribution === 0
        "
        @click="onUpgradeClick"
      >
        {{ nextContribution === 0 ? '已满级' : '提升职务' }}
      </a-button>
    </div>
  </div>
</template>

<style scoped>
.job-active.ant-card-bordered {
  border-color: var(--color-primary);
}
</style>
